<template>
  <a-modal v-model="visible" title="查看评价" :width="700" centered :footer="false" destroyOnClose class="return-modal">
    <div class="section-title">
      <div class="title">评分</div>
      <div class="time">{{ evaluation.createTime }}</div>
    </div>
    <a-form style="margin-bottom: 24px;">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="BOX">
        <a-rate :default-value="evaluation.boxScore" allow-half disabled />
        <span class="like-text">{{ evaluation.boxScore | rateText }}</span>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="搭配师">
        <a-rate :default-value="evaluation.fashionerScore / 2" allow-half disabled />
        <span class="like-text">{{ (evaluation.fashionerScore / 2) | rateText }}</span>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="尺码匹配度">
        <a-rate :default-value="evaluation.sizeScore" allow-half disabled />
        <span class="like-text">{{ evaluation.sizeScore | rateText }}</span>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客服评价">
        <a-rate :default-value="evaluation.customerserviceScore" allow-half disabled />
        <span class="like-text">{{ evaluation.customerserviceScore | rateText }}</span>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="评价内容" v-if="evaluation.content">
        <a-textarea v-model="evaluation.content" :auto-size="{ minRows: 3, maxRows: 5 }" disabled />
      </a-form-item>
    </a-form>
    <div class="section-title">
      <div class="title">问卷</div>
      <div class="time">{{ evaluation.createTime }}</div>
    </div>
    <a-list item-layout="horizontal" :data-source="details" class="goods-list">
      <a-list-item slot="renderItem" slot-scope="item" class="goods">
        <img :src="item.img ? item.img : 'https://img.bzhz.jnbygroup.com/cloth.png'" alt="" class="goods-img" />
        <div>
          <p>款号：{{ item.code }}</p>
          <p v-for="(qa, index) in JSON.parse(item.tagJson)" :key="index">
            <span style="font-weight:500;">{{ qa.name }}：</span>{{ qa.tags[0] }}
          </p>
        </div>
      </a-list-item>
    </a-list>
  </a-modal>
</template>
<script>
import { queryBoxEval } from '@/api/box/order'
export default {
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 4 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 12 }
      },
      data: [],
      boxId: '',
      evaluation: {},
      details: []
      // 不满意、不太满意、一般般、赞，喜欢、
    }
  },
  filters: {
    rateText(v) {
      if (v == 1) {
        return '不满意'
      } else if (v == 2) {
        return '不太满意'
      } else if (v == 3) {
        return '一般般'
      } else if (v == 4) {
        return '赞，喜欢'
      } else if (v == 5) {
        return '超赞，特别喜欢'
      }
    }
  },
  methods: {
    show(id) {
      this.boxId = id
      this.fetchData()
    },
    fetchData() {
      let params = {
        requestData: {
          boxId: this.boxId
        }
      }
      queryBoxEval(params).then(res => {
        if (res.code == 0) {
          if (res.data == null) {
            this.$message.warning('暂无评价')
          } else {
            this.evaluation = res.data.evaluation
            this.details = res.data.details
            this.visible = true
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.return-modal {
  /deep/.ant-modal-body {
    max-height: 600px;
    overflow-y: auto;
  }
}

.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.goods-list {
  margin-bottom: 24px;
}
.goods {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px dashed #e8e8e8;
  img {
    min-width: 80px;
    height: 80px;
    object-fit: scale-down;
    border: 1px dashed #cdcdcd;
    margin-right: 12px;
    margin-left: 12px;
  }
  div {
    p {
      color: #666;
    }
  }
}
.ant-form {
  /deep/.ant-form-item {
    margin-bottom: 12px;
  }
}
.like-text {
  margin-left: 8px;
}
</style>
